<template>
	<div>
		<div class="leftContent">
			<el-scrollbar :max-height="maxHeight">
				<box class="mb-3" :wvalueth="480" :title="'数据管理'">
					<div class="mb-1">
						<p class="font-lan-gray-60">地图管理：</p>
						<el-row :gutter="16">
							<el-col :span="12">
								<coverage v-model="data.select" :placeholder="'图层管理'" :options="data.coverage" @change="slecetChange" />
							</el-col>
							<el-col :span="12">
								<maptype />
							</el-col>
						</el-row>
					</div>
					<div class="mb-1">
						<p class="font-lan-gray-60">数据管理：</p>
						<el-row :gutter="16">
							<!-- <el-col :span="12">
								<scSelect v-model="data.weather" :placeholder="'物联网数据'" :options="data.weathers" @change="slecetChange" />
							</el-col> -->
							<el-col :span="24">
								<scCascader v-model="data.pullData" :placeholder="'数据管理'" :options="data.pullDatas" :label="'name'"
              :value="'id'" @change="acscaderChange"/>
							</el-col>
						</el-row>
					</div>
					<div>
						<p class="font-lan-gray-60">数据范围：</p>
						<scCascader v-model="data.cascader" :placeholder="'地址管理'" :options="storage.state.area" :label="'name'"
							:value="'id'" @change="acscaderChange" />
					</div>
				</box>
        <box :width="480" :title="'遥感和无人机数据统计'">
					<!-- <decorate1 class="mb-2">
            <div class="d-flex">
              <div class="d-flex ai-center">
                <img :src="area" alt="">
                <span class="font-lan ml-3">总面积：</span>
              </div>
              <div>
                <span class="font-num-l">{{ 1205 }}</span>
                <span class="font-lan">亩</span>
              </div>
            </div>
          </decorate1> -->
          <decorate2 class="mb-2" :title="'遥感监测'" />
          <el-row :gutter="8" class="mb-3">
            <el-col :span="18">
              <div class="mainRemote">
                <img class="remoteImg" :src="data.remoteList.length>0?data.remoteList[data.remoteActive].imgUrl:''" alt="">
                <div class="mainShadow font-lan-s">{{data.remoteList.length>0?data.remoteList[data.remoteActive].monitorTime:''}}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <el-scrollbar :max-height="200">
                <div v-for="(item,index) in data.remoteList" :key="index" :class="[index < data.remoteList.length - 1 ?'mb-1':'','pointer','subRemote']" @click="data.remoteActive = index">
                  <img class="remoteSubImg" :src="item.imgUrl" alt="">
                  <div class="mainShadow font-lan-s">{{data.remoteList.length>0?item.monitorTime:''}}</div>
                </div>
              </el-scrollbar>
            </el-col>
          </el-row>
          <decorate2 class="mb-2" :title="'无人机监测'" />
          <el-row :gutter="8">
            <el-col :span="18">
              <div class="mainRemote">
                <img class="remoteImg" :src="data.uavList.length>0?data.uavList[data.uavActive].imgUrl:''" alt="">
                <div class="mainShadow font-lan-s">{{data.uavList.length>0?data.uavList[data.uavActive].monitorTime:''}}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <el-scrollbar :max-height="200">
                <div v-for="(item,index) in data.uavList" :key="index" :class="[index < data.uavList.length - 1 ?'mb-1':'','pointer','subRemote']" @click="data.uavActive = index">
                  <img class="remoteSubImg" :src="item.imgUrl" alt="">
                  <div class="mainShadow font-lan-s">{{data.uavList.length>0?item.monitorTime:''}}</div>
                </div>
              </el-scrollbar>
            </el-col>
          </el-row>
				</box>
			</el-scrollbar>
		</div>
		<div class="rightContent">
			<el-scrollbar :max-height="maxHeight">
				<box :width="480" :title="'解译指标-建中监测'">
					<div v-for="(item, index) in data.list" :key="index" class="d-flex ai-center mb-1">
            <div class="warningImg p-3 mr-3">
              <img :src="item.img?base_url+item.img:remoteWarning" alt="" class="img">
            </div>
              <div class="flex-1">
                <div class="d-flex ai-center jc-between">
                  <p class="font-lan">{{item.name}}</p>
                  <el-button type="primary" round size="small" @click="showCompareImg(item)">查看</el-button>
                </div>
                <div>
                  <span class="font-lan-gray-60-s">数据来源：</span>
                  <span class="font-lan-m">{{item.type == '1'?'遥感监测':'无人机监测'+ '-' +item.monitorTime}}</span>
                </div>
                <div>
                  <span class="font-lan-gray-60-s">告警内容：</span>
                  <span class="font-lan-m">{{item.content}}</span>
                </div>
                <div>
                  <span class="font-lan-gray-60-s">影响面积：</span>
                  <span class="font-lan-m">{{item.influenceArea}}亩</span>
                </div>
              </div>
            </div>
				</box>
			</el-scrollbar>
		</div>
    <datePlayerBar :data="data.dateList" @timeChange="timeChange" @yearChange="yearChange"/>
    <window v-model="showWindow">
      <VueCompareImage :leftImage="data.image1" :rightImage="data.image2"/>
    </window>
	</div>
</template>
  
<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, computed } from "vue";
import datePlayerBar from '@/components/timeBar/datePlayerBar.vue'
import mapControler from "@/components/mapContainer/mapControler";
import {
  indexList,
  imageList,
  equipmentList
} from "@/public/request/http";
import moment from "moment";
import storage from '@/store'
import Setting from '@/public/config'
import { useRouter } from 'vue-router';
import { VueCompareImage } from 'vue3-compare-image'
export default defineComponent({
	components: {
    datePlayerBar,
    VueCompareImage
	},
	setup() {
		//变量
		// const maxHeight = ref(window.innerHeight-160+'px')
		const maxHeight = computed(() => window.innerHeight - 160 + 'px')
    const router = useRouter()
    const base_url = Setting.HttpApiAddress
		const data: any = reactive({
			coverage: [],
			select: null,
			pullDatas: [],
			pullData: [],
			cascader: [],
      weather:null,
      weathers:[{label: "气温",value:'0'},{label: "气压",value:'1'},{label: "风速",value:'2'},{label: "降水",value:'3'},{label: "土壤",value:'4'}],
      dataInfo: {},
      temperatureData: {
        xAxis: [],
        series: [],
        unit: "℃",
      },
      radiationData: {
        xAxis: [],
        series: [],
        unit: "h",
      },
      dateList: [],
      forecast:4,
      hint:0,
      list:[],
      remoteList:[],
      remoteActive:0,
      uavList:[],
      uavActive:0,
      image1:'',
      Image2:''
		});

    const area = require("@/assets/img/area.png");
    const remoteWarning = require("@/assets/img/remoteWarning.png");
		const showWindow = ref(false)
		// 生命周期
		onMounted(async () => {
      data.pullDatas = [storage.state.dataSources[router.currentRoute.value.meta.index.toString()]]
			mapControler.mapReSet();
			getIndexList()
      getImgexList()
      data.dateList = [{date:'12-21',wms:''},{date:'12-22',wms:''},{date:'12-23',wms:''},{date:'12-24',wms:''},{date:'12-25',wms:''},{date:'12-26',wms:''},{date:'12-27',wms:''},{date:'12-28',wms:''},{date:'12-29',wms:''},{date:'12-30',wms:''},{date:'12-31',wms:''}]
		});

		onUnmounted(() => {
			//
			mapControler.mapReSet();

		});

		//methods
    const getIndexList = async () => {
      try {
        let res = await indexList({
          areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
        })
        data.list = res
      } catch (error) {
        
      }
    }

    const getImgexList = async () => {
      data.remoteList = []
      data.uavList = []
      try {
        let res = await imageList({
          areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
        })
        res.forEach(item=>{
          if(item.type == 1){
            data.remoteList.push(item)
          }else{
            data.uavList.push(item)
          }
        })
      } catch (error) {
        
      }
    }

    

		const timeChange = (val) => {
      //
      // console.log(val);
      
    };

    const yearChange = async (val) =>{
      console.log(val);
      
    }

		const slecetChange = (e) => {
			console.log(e);
		}

		const acscaderChange = (e) => {
      //
      console.log(e);
      
		}

    const showCompareImg = (val)=>{
      console.log(val);
      data.image1 = 'https://iqq.etkqq.gov.cn/api-bi/profile/2023/07/15/63.png'
      data.image2 = 'https://axure-file.lanhuapp.com/md53ffe96b1-d37a-4c23-b909-a4d6e8419085__8e792269afd622b144d4bb17fc8b4a58.png'
      showWindow.value = true
    }

    const getEquipmentList = async () => {
      try {
        let res = await equipmentList();
        res.rows.forEach(item=>{
          item.devieceType = 'device'
          item.mapPop = getType(item.type).mapPop
          mapControler.drawMark(item.lon,item.lat,getType(item.type).icon,item)
        })
        
      } catch (error) {
        return
      }
    }

    const getType = (val)=>{
      let obj = {
        name: '',
        background: '',
        icon:'',
        mapPop:''
      }
      switch (val) {
        case 0:
          obj.name = '水肥一体机';
          obj.background = 'rgba(147, 245, 225, 1)';
          obj.icon = require('@/assets/img/deviceIcon_0.png');
          obj.mapPop = 'popWindows1';
          break;
        case 1:
          obj.name = '监控设备';
          obj.background = 'rgba(147, 170, 245, 1)';
          obj.icon = require('@/assets/img/deviceIcon_1.png');
          obj.mapPop = 'popWindows2';
          break;
        case 2:
          obj.name = '气象站';
          obj.background = 'rgba(147, 219, 245, 1)';
          obj.icon = require('@/assets/img/deviceIcon_2.png');
          obj.mapPop = 'popWindows3';
          break;
        case 3:
          obj.name = '虫情仪';
          obj.background = 'rgba(245, 186, 147, 1)';
          obj.icon = require('@/assets/img/deviceIcon_3.png');
          obj.mapPop = 'popWindows4';
          break;
        case 4:
        obj.name = '土壤墒情仪';
          obj.background = 'rgba(245, 225, 147, 1)';
          obj.icon = require('@/assets/img/deviceIcon_4.png');
          obj.mapPop = 'popWindows5';
          break;
        default:
          obj.name = '孢子仪';
          obj.background = 'rgba(192, 147, 245, 1)';
          obj.icon = require('@/assets/img/deviceIcon_5.png');
          obj.mapPop = 'popWindows6';
          break;
      }
      return obj
    }

		// return
		return {
			data,
			slecetChange,
			acscaderChange,
			moment,
			maxHeight,
			storage,
      timeChange,
      yearChange,
      area,
      remoteWarning,
      base_url,
      showWindow,
      showCompareImg
		};
	},
});
</script>
  
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.warningImg{
  border-radius: 8px;
  background-color: rgb(0 0 0 / 30%);
}
.img{
  width: 40px;
  height: 40px;
  
}
.mainRemote{
  position: relative;
  .remoteImg{
    width: 100%;
    max-height: 200px;
  }
}
.subRemote{
  position: relative;
  .remoteSubImg{
    width: 100%;
    max-height: 60px;
  }
}
.mainShadow{
  position: absolute;
  width: 100%;
  left: 0;
  padding: 4px;
  bottom: 4px;
  background: rgba(0,0,0,0.4);
}

</style>
  